vlwkaos' digital garden

Naive한 React사용을 반면교사로 삼자

2021-06-11

React를 잘못된 방법으로 사용할 수 밖에 없는 상황이 아쉽지만 얻는게 없지는 않다. 내가 느끼는 React의 장점은 컴포지션을 통한 코드 재사용, JSX의 선언형 코드를 통한 코드 가독성, 내부 Fiber구조를 통한 성능 최적화이다. React를 쓰면서 컴포지션을 하지않고 반대로 상속 구조를 이용하다보면 React에서 컴포지션을 해야하는 이유를 확실하게 알 수 있다. 이미 JSX형식으로 작성할 때ReactElement를 DOM Tree와같은 계층구조로 작성하기 때문에 상속을 이용하면 불필요하고 의존적인 계층 구조가 하나 더 생겨버린다. 더군다나 컴포넌트라는 단위를 이용하면 관심사 분리가 어느정도 되어 중복코드가 생길지언정 코드를 이해하기는 편한데, 상속을 하는 순간 관심사가 같은 코드임에도 불구하고 이곳 저곳 왔다갔다하는 양이 많아져서 개발 속도도 더뎌진다. React의 장점이 다 사라지는 순간을 마주할 수 있다.

기능이 복잡할 수록 코드량이 많아지는 것은 어느정도 어쩔 수 없다. 어떻게 짜야 이해하기 편한 코드가 될지 계속 고민해야한다. React의 경우 기능이 많아지고 컴포넌트의 깊이가 깊어질수록 이미 알려진 문제인 Prop Drilling을 마주하게 된다. 속성을 쭉 내려주는 방식은 명시적이어서 큰 문제가 되진 않지만 속성이 하나 추가되거나 제거될 때마다 변경해야할 부분이 많아질 수 있고 속성 심볼 리팩토링시에 끊어지는 경우도 있어 관리가 어려울 수 있다. 이 문제를 사이드이펙트없이 완벽히 해결할 수는 없다. 예를 들어 [[Redux 리덕스]]나 Mobx와 같은 전역 상태관리 라이브러리를 사용하면 Store 규모가 커져서 이를 잘 관리해야하는 또 다른 문제가 발생한다. 그럼에도 불구하고 대세는 전역 상태 관리 라이브러리를 사용하는 쪽인 것 같다. 만약 쓰지 않더라도 React의 ContextAPI나 hook등 여러 선택지가 나왔기 때문에 개발자 편의와 상황에 따라 적절한 도구를 이용하면 될 듯 싶다.

Referred in

Naive한 React사용을 반면교사로 삼자